<template>
    <Content>
        <template #Menu>
            <a-flex vertical style="height:100%">
                <a-flex style="padding: 0 8px">
                    <a-input v-model:value="FilterStr" style="width: 100%" placeholder="请输入筛选项" />
                    <a-dropdown :trigger="['click']">
                        <a class="ant-dropdown-link" @click.prevent>
                            <a-button type="primary" class="AddBotton" :icon="icon" />
                        </a>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item v-for="item in AppConfig.Config">
                                    <component :is="item.AddButtonComp" />
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </a-flex>
                <div class="MenuBox">
                    <DragTree :TreeData="ListData" :ChildMap="AppConfig.TreeComp" ref="DragTreeVue"
                        @ItemClick="ItemClick" />
                </div>
            </a-flex>
        </template>
        <template #Content>
            <a-layout style="height : 100%">
                <a-layout-header :style="{
                    height: '48px',
                    backgroundColor: token.colorBgContainer,
                    padding: '0 16px',
                    borderBottom: '1px solid ' + token.colorBorderSecondary
                }">
                    <a-flex justify="space-between" align="center" style="height: 48px">
                        <div class="TitleBox">{{ Title }}</div>
                        <component :is="TitleRightComp" />
                    </a-flex>
                </a-layout-header>
                <a-layout-content style="overflow-y: auto;">
                    <router-view :FormType="FormType"></router-view>
                </a-layout-content>
            </a-layout>
        </template>
    </Content>
</template>

<script setup>
import { ref, h, watch, shallowRef } from 'vue';
import Content from '../Content.vue';
import { useRoute, useRouter } from 'vue-router';
import { UseAppConfigStore } from '../../AppStore.js'
import DragTree from './DragTree.vue'
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();


const icon = h('span', { class: 'iconfont icon-add' })

const AppConfig = UseAppConfigStore();

const TitleRightComp = shallowRef();


const Route = useRoute();
const Router = useRouter();

const FilterStr = ref('');

const ListData = ref([]);

const DragTreeVue = ref();
const Title = ref('');

const FormType = ref(null);

// 跳转到详情页
const ItemClick = function (Data) {
    Router.push({
        name: 'AppAdminForm',
        params: {
            appId: Route.params.appid,
            formId: Data.id
        }
    });
};


const GetFirstItem = function (List) {
    let ans = null;
    for (let i = 0; i < List.length; i++) {
        const element = List[i];
        if (element.formType == 'group') {
            ans = GetFirstItem(element.children);
        } else {
            ans = element
        };
        if (ans) {
            break;
        };
    };
    return ans;
};

const GetChild = function (List, _id) {
    let ans = null;
    for (let i = 0; i < List.length; i++) {
        const element = List[i];
        if (element.formType == 'group' && element.children) {
            var value = GetChild(element.children, _id);
            if (value) {
                ans = value
            }
        };
        if (element.id == _id) {
            ans = element;
        };
        if (ans) {
            break;
        }
    }
    return ans;
};


setTimeout(() => {
    ListData.value = [{
        "id": "1847285204941041113",
        "appId": "1845511152371726808",
        "parentId": "0",
        "originalTitle": "测试表单测试表单测试表单测试表单测试表单",
        "formType": "group",
        "formSort": 2,
        "children": [{
            "id": "1846175827357745707",
            "appId": "1845511152371726808",
            "parentId": "1847285204941041113",
            "originalTitle": "测试表单",
            "schemaType": "superform",
            "formType": "custome",
            "formSort": 0,
            "tableName": "t_form_instance_dehj63eqvowzl"
        }, {
            "id": "1847285215502180712",
            "appId": "1845511152371726808",
            "parentId": "1847285204941041113",
            "originalTitle": "bb",
            "formType": "group",
            "formSort": 1
        }, {
            "id": "1847285204941041116",
            "appId": "1845511152371726808",
            "parentId": "0",
            "originalTitle": "aa",
            "formType": "group",
            "formSort": 2,
            "children": [{
                "id": "1846175827357745709",
                "appId": "1845511152371726808",
                "parentId": "1847285204941041113",
                "originalTitle": "测试表单",
                "schemaType": "superform",
                "formType": "custome",
                "formSort": 0,
                "tableName": "t_form_instance_dehj63eqvowzl"
            }, {
                "id": "1847285215502180714",
                "appId": "1845511152371726808",
                "parentId": "1847285204941041113",
                "originalTitle": "bb",
                "formType": "group",
                "formSort": 1
            }]
        },]
    }, {
        "id": "1847285204941041119",
        "appId": "1845511152371726808",
        "parentId": "0",
        "originalTitle": "aa",
        "formType": "group",
        "formSort": 2,
        "children": [{
            "id": "1846175827357725707",
            "appId": "1845511152371726808",
            "parentId": "1847285204941041113",
            "originalTitle": "测试表单",
            "schemaType": "superform",
            "formType": "custome",
            "formSort": 0,
            "tableName": "t_form_instance_dehj63eqvowzl"
        }, {
            "id": "1847285215502180716",
            "appId": "1845511152371726808",
            "parentId": "1847285204941041113",
            "originalTitle": "bb",
            "formType": "group",
            "formSort": 1
        }]
    }, {
        "id": "1845519777741910637",
        "appId": "1845511152371726808",
        "parentId": "0",
        "originalTitle": "测试表单",
        "schemaType": "superform",
        "formType": "custome",
        "formSort": 0,
        "tableName": "t_form_instance_dan91oxbebxoui"
    }, {
        "id": "1845599142090934645",
        "appId": "1845511152371726808",
        "parentId": "0",
        "originalTitle": "组件内过滤测试",
        "schemaType": "superform",
        "formType": "custome",
        "formSort": 1
    }];

    if (Route.name == 'AppAdmin') {
        const FormItem = GetFirstItem(ListData.value);
        Router.replace({
            name: 'AppAdminForm',
            params: {
                appId: Route.params.appid,
                formId: FormItem.id
            }
        });
        FormType.value = FormItem.formType;
        Title.value = FormItem.originalTitle;
        TitleRightComp.value = AppConfig.TitleRightComp[FormType.value];
        setTimeout(() => {
            DragTreeVue.value.SetActiveObject(FormItem);
        }, 1)
    } else if (Route.params.formId) {
        const _id = Route.params.formId;
        const FormItem = GetChild(ListData.value, _id);
        setTimeout(() => {
            DragTreeVue.value.SetActiveObject(FormItem);
        }, 1)
        FormType.value = FormItem.formType;
        Title.value = FormItem.originalTitle;
        TitleRightComp.value = AppConfig.TitleRightComp[FormType.value];
    };
}, 300)



watch(Route, val => {
    if (val.params.formId && ListData.value.length != 0) {
        const FormItem = GetChild(ListData.value, val.params.formId);
        setTimeout(() => {
            DragTreeVue.value.SetActiveObject(FormItem);
        }, 1)
        FormType.value = FormItem.formType;
        Title.value = FormItem.originalTitle;
        TitleRightComp.value = AppConfig.TitleRightComp[FormType.value];
    }
}, { deep: true, immediate: true })

</script>

<style lang="less" scoped>
.AddBotton {
    width: 32px;
    margin-left: 8px;
}

.MenuBox {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    overflow-y: auto;
}
</style>